<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>元创官网</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/orico_header.css" />
		<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
	</head>
	<body>
		<header class="header-PC">
			<div id="header">
				<!-- LOG -->
				<div class="nav1">
					<a>
						<img src="headimg/logo.png" />
					</a>
				</div>
				<!--顶部导航栏 -->
				<div class="nav2">
					<nav id="booNavigation" class="booNavigation">
						<ul>
							<li class="navItem">
								<a>Products</a>
								<img src="headimg/black-down.png" class="downimg" />
								<!-- 下拉选项-->
								<div class="navItemConten">
									<!-- 左边子菜单-->
									<ul class="navItem_cyleft">
										<li class="it_active">
											<a>Data Storage</a>
										</li>
										<li>
											<a>Lifestyle&Home</a>
										</li>
										<li>
											<a>Accessory</a>
										</li>
									</ul>
									<!-- 右边子菜单-->
									<div class="navItem_cyright">
										<dl class="nav_cyrightit">
											<dt>
												<a><img src="" /> SSD </a>
											</dt>
											<dd>
												<a>M.2 NVMe SSD</a>
											</dd>
											<dd>
												<a>M.2 SATA SSD</a>
											</dd>
											<dd>
												<a>mSATA SSD</a>
											</dd>
											<dd>
												<a>2.5" SATA SSD</a>
											</dd>
										</dl>
										<dl class="nav_cyrightit">
											<dt>
												<a><img src="" /> Portable SSD (PSSD) </a>
											</dt>
											<dd>
												<a>Portable SSD (PSSD)</a>
											</dd>
										</dl>
										<dl class="nav_cyrightit">
											<dt>
												<a><img src="" /> USB Flash Drive / Memory Card </a>
											</dt>
											<dd>
												<a>TF Card</a>
											</dd>
										</dl>
									</div>
								</div>
							</li>
							<li class="navItem">
								<a>New Arrival</a>
							</li>
							<li class="navItem">
								<a>SSD</a>
							</li>
							<li class="navItem">
								<a>PSSD</a>
							</li>
							<li class="navItem">
								<a>Cooperation</a>
								<img src="headimg/black-down.png" class="downimg" />
								<!--下拉菜单 -->
								<ol class="navItemConten1">
									<li>
										<a>OEM & ODM Customization</a>
									</li>
									<li>
										<a>Shop for Business</a>
									</li>
									<li>
										<a>Shop for Business</a>
									</li>
								</ol>
							</li>
							<li class="navItem">
								<a>Support</a>
								<img src="headimg/black-down.png" class="downimg" />
								<!--下拉菜单 -->
								<ol class="navItemConten1">
									<li>
										<a>Product Support</a>
									</li>
									<li>
										<a>Contact Us</a>
									</li>
									<li>
										<a>Anti-Fake Query</a>
									</li>
									<li>
										<a>FAQ</a>
									</li>
								</ol>
							</li>
							<li class="navItem">
								<a>About Us</a>
								<img src="headimg/black-down.png" class="downimg" />
								<!--下拉菜单 -->
								<ol class="navItemConten1">
									<li>
										<a>Our Brand</a>
									</li>
									<li>
										<a>Our Product</a>
									</li>
									<li>
										<a>Our Achievement</a>
									</li>
								</ol>
							</li>
							<li class="navItem">
								<a>News＆Events</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- 顶部搜索/国家选择/商店-->
				<div class="nav3">
					<img src="headimg/icon-search.png" id="openModalBtn" class="searchimg" />
					<div class="choesCountry">
						<img src="headimg/icon-language.png" id="countrycheck" class="checkimg" />
						<!--国家选择 -->
						<div class="topCountry" id="top-country">
							<ul>
								<li class="closec">
									<span class="closecountrybt">×</span>
								</li>
								<a>
									<li>
										<div class="cico">
											<img src="headimg/CN.png" class="countryimg" />
										</div>
										
										<p class="countryName">China - 中文简体</p>
									</li>
									<li>
										<div class="cico">
											<img src="headimg/CN.png" class="countryimg" />
										</div>
										
										<p class="countryName">China - 中文简体</p>
									</li>
									<li>
										<div class="cico">
											<img src="headimg/CN.png" class="countryimg" />
										</div>
										
										<p class="countryName">China - 中文简体</p>
									</li>
									<li>
										<div class="cico">
											<img src="headimg/CN.png" class="countryimg" />
										</div>
										
										<p class="countryName">China - 中文简体</p>
									</li>
								</a>
							</ul>
						</div>
					</div>
					<a class="storetopbt"><img src="headimg/shopico.png" class="storeImgico" />Store </a>
				</div>
			</div>
			<!-- 搜索弹框-->
			<div class="searchmodalMian" id="scmodal">
				<div class="searchmodalct">
					<span class="close-btn">×</span>
					<input type="text" name="keywords" id="serrchinput" />
					<!-- 历史记录 -->
					<div class="searchhistory">
						<p class="h_title">Search History</p>
						<ul>
							<li><a>Thunderbolt Series</a></li>
							<li><a>Support</a></li>
							<li><a>Product</a></li>
						</ul>
					</div>
					<div class="popProduct">
						<p class="h_title">Popular Products</p>
						<div class="popmain">
							<div class="popitem">
								<a><img src="headimg/2577U3-L1.jpg" class="popimg" /></a>
								<div class="productName"> 2.5 inch USB3.0 Hard Drive Enclosure </div>
							</div>
							<div class="popitem">
								<a><img src="headimg/2577U3-L1.jpg" class="popimg" /></a>
								<div class="productName"> 2.5 inch USB3.0 Hard Drive Enclosure </div>
							</div>
							<div class="popitem">
								<a><img src="headimg/2577U3-L1.jpg" class="popimg" /></a>
								<div class="productName"> 2.5 inch USB3.0 Hard Drive Enclosure </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
	</body>
	<script>
		$(document).ready(function() {
			// ---移入第1个
			$('.navItem').first().mouseenter(function() {
				var $navItemConten = $(this).find('.navItemConten');
				$navItemConten.stop(true, true).slideDown(300);
			});
			$('.navItem').first().mouseleave(function() {
				var $navItemConten = $(this).find('.navItemConten');
				$navItemConten.stop(true, true).slideUp(300);
			});
			// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
			$('.navItem_cyleft li').mouseenter(function() {
				$(this).addClass('it_active').siblings().removeClass('it_active');
			});
			// ---移入第5个
			$('.navItem').eq(4).mouseenter(function() {
				$(this).find('.navItemConten1').show();
			});
			$('.navItem').eq(4).mouseleave(function() {
				$(this).find('.navItemConten1').hide();
			});
			// ---移入第6个
			$('.navItem').eq(5).mouseenter(function() {
				$(this).find('.navItemConten1').show();
			});
			$('.navItem').eq(5).mouseleave(function() {
				$(this).find('.navItemConten1').hide();
			});
			// ---移入第7个
			$('.navItem').eq(6).mouseenter(function() {
				$(this).find('.navItemConten1').show();
			});
			$('.navItem').eq(6).mouseleave(function() {
				$(this).find('.navItemConten1').hide();
			});
			// 点击搜索
			$('#openModalBtn').click(function() {
				$('#scmodal').toggle();
			});
			$('.close-btn').click(function() {
				$('#scmodal').hide();
			});
			// 点击选择国家
			$('#countrycheck').click(function() {
				$('#top-country').toggle();
			});
			$('.closecountrybt').click(function() {
				$('#top-country').hide();
			});
		});
	</script>
</html>